import React,{useState} from 'react' ;
import {Modal,ModalProps,Button,Spin} from 'apusic-ui' ;

export enum OptionBtnType{
  'TEXT'='TEXT',
  'LINK'='LINK',
  'BUTTON'='BUTTON',
  'DEFAULTBUTTON'='DEFAULTBUTTON',
}
interface TModalState {
  isFetching?:boolean ;
  visible:boolean;//modal是否可见
  title:React.ReactNode;
  btnTitle:React.ReactNode;
  size?:string;
  btnType?:OptionBtnType;
  disabled?:boolean;
  optionComponent?:React.ReactNode;
  btnStyle?:any
}
interface TAction{
  show:()=>void,
  hide:()=>void,
  setModalState:any,
}
interface TModalProps {
  onOk?: any;
  onCancel?: any;
  modalProps?:ModalProps ;
  modalState:TModalState;
  show:()=>void;
  hide:()=>void;
  setModalState:any;
  fetchData?:any;
  content:React.ReactNode;
}

const ModalTemplate = (props: TModalProps) => {
    const {modalProps,modalState:{
      isFetching,visible,title,btnTitle,btnType,disabled,size,optionComponent,btnStyle
    },onOk,onCancel,show,hide,setModalState,fetchData,content} = props;
  
    const onOkClick = () => {
      if(onOk){
        onOk();
      }else{
        hide();
      }
    }
    const onCancelClick = () => {
      if(onCancel){
        onCancel();
      }else{
        hide();
      }
    }
    const openModal = async() => {
      show();
      if(fetchData){
        setModalState((modalState:any)=>({
          ...modalState ,
          isFetching:true ,
        })) ;
        await fetchData();
        setModalState((modalState:any)=>({
          ...modalState ,
          isFetching:false ,
        })) ;
      }
    }
    const closeModal = () => {
      hide();
    }
    const modalWidth=size==="small"?400:size==="middle"?600:size==="large"?820:600;
    return (
      <>
      {
        optionComponent?
          <div onClick={openModal}>{optionComponent}</div>:
          (btnType===OptionBtnType.TEXT?
          <Button onClick={openModal} type="text" disabled={disabled || false} style={{...btnStyle}}>{btnTitle}</Button>:
          btnType===OptionBtnType.LINK?
            <Button onClick={openModal} type="link" disabled={disabled || false} style={{...btnStyle}}>{btnTitle}</Button>:
          btnType===OptionBtnType.DEFAULTBUTTON?<Button onClick={openModal} disabled={disabled || false} style={{...btnStyle}}>{btnTitle}</Button>:
            <Button onClick={openModal} type="primary" disabled={disabled || false} style={{...btnStyle}}>{btnTitle}</Button>)
      }
      {
        // @ts-ignore
        <Modal
            visible={visible}
            title={title}
            okText="确定"
            onOk={onOkClick}
            cancelText="取消"
            onCancel={onCancelClick}
            maskClosable={false}
            centered
            width={modalWidth}
            {...modalProps}
            bodyStyle={{
            maxHeight:"543px",
            overflowY:"auto"
            }}
        >
            {
                // @ts-ignore
                <Spin spinning={isFetching || false}>
                {content}
                </Spin>
            }        
        </Modal>
      }      
      </>
    )
  };

  const useModal = (initState: TModalState):[TModalState,TAction] => {
    const [modalState, setModalState] = useState(initState);
    function show() {
      setModalState((modalState)=>({
        ...modalState ,
        visible:true ,
      })) ;
    }
    function hide() {
      setModalState((modalState)=>({
        ...modalState ,
        visible:false ,
      })) ;
    }
    return [
      modalState,
      {
        show,
        hide,
        setModalState,
      }
    ]
  };
  
  export default ModalTemplate ;
  export {
    useModal
  }